<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<router-link to="/login">登录</router-link>
			<router-link to="/register">注册</router-link>
			<router-view></router-view>
		</div>
		
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../vue-router.min.js"></script>
		<script type="text/javascript">
		
			const login = {
				template: '<div><h1>登录界面</h1></div>'
			}
			const register = {
				template: `
				<div>
				  <h1>注册界面,我是注册界面</h1>
					<hr>
					<router-link to='/register/tab1'>tab1</router-link>
					<router-link to='/register/tab2'>tab2</router-link>
					<router-view></router-view>
				</div>
				`
			}
			const tab1 = {
				template: '<div><h1>tab1界面</h1></div>'
			}
			
			const tab2 = {
				template: '<div><h1>tab2界面</h1></div>'
			}
			
			
			var router = new VueRouter({
				routes: [
					{
						//重定向
						path: '/',redirect: '/login'
					},
					{
						path: '/login', component: login
					},
					{
						path: '/register', component: register,
						children: [
							{path: '/register/tab1', component: tab1},
							{path: '/register/tab2', component: tab2}
						]
					}		
				]
			})
			
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				router
			})
			
		</script>
	</body>
</html>
